<script>
/*
 * @Author: Your name
 * @Date:   2020-07-22 10:46:42
 * @Last Modified by:   Your name
 * @Last Modified time: 2020-07-22 14:37:35
 */
</script>
<template>
  <div id="detailImagesContainer">
    <div class="itemContainer" v-for="(item, index) in detailImagesInfo" :key="index">
      <p class="title">
        {{item.name}}
      </p>
      <img :src="item2" alt="" v-for="(item2, index2) in item.images" :key="index2" @load="imageLoad">
    </div>
    
  </div>
</template>
<script>
export default {
  name: 'DetailImagesInfo',
  props: {
    detailImagesInfo: {
      type: Array,
      default: []
    }
  },
  methods: {
    imageLoad(){
      this.$emit('detaliImgLoad');
    }
  }
}
</script>
<style lang="css">
  #detailImagesContainer{
    width: 100%;
  }
  #detailImagesContainer .itemContainer{
    width: 100%;
  }
  #detailImagesContainer .itemContainer .title{
    padding: 10px;
    color: #333;
  }
  #detailImagesContainer .itemContainer img{
    width: 100%;
  }
</style>